<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.all{display: flex;position: relative;}
		.pics{width:240px;height: 180px;position: absolute;}
		img{width: 240px;height: 180px;}
		.zoom{transform: scale(150%);}
	</style>
</head>
<body>
	<section class="all">
		<div class="pics">
			<img src="img/tour2.jpg" alt="">
		</div>
		<div class="pics" style="left: 260px;">
			<img src="img/tour2.jpg" alt="">
		</div>
	</section>
	
	<script type="text/javascript">
		var pic=document.querySelectorAll('.pics');
		for(var i=0;i<pic.length;i++){
			pic[i].onmouseover=function(){
				this.className="zoom";
			}
			pic[i].onmouseout=function(){
				this.className=""
			}
		}
		
	</script>
</body>
</html>